import styled from 'styled-components'
import React, { useEffect, useState } from 'react'
import type { FC, ReactNode } from 'react'
import MonacoEditor from 'react-monaco-editor'

import './index.scss'
// 定义 Wrap 组件
const Wrap = styled.div`
  position: absolute;
  width: 1100px;
  height: 150px;
  top: 0;
  left: 0;
`

interface IProps {
  children?: ReactNode
  code?: string
}
const EditorViewer: FC<IProps> = ({ code }) => {
  const [codeContent] = useState(code)
  useEffect(() => {})

  return (
    <Wrap>
      <MonacoEditor
        width="100%"
        language="javascript"
        value={codeContent}
        theme="vs-dark"
        options={{ readOnly: true }}
      />
    </Wrap>
  )
}

export default EditorViewer
